<template>
    <div>
      <KTBlankTab v-bind:title="'Select File'">
          <template v-slot:preview>
            <b-row>
                <b-col cols="10">
                  <p>
                    Please select the files for Information Flow measurement, limited to JAVA files:
                  </p>
                  <b-form-file multiple @change="onFileSelected" accept=".java">
                    <template slot="file-name" slot-scope="{ names }">
                      <b-badge variant="dark">{{ names[0] }}</b-badge>
                      <b-badge v-if="names.length > 1" variant="dark" class="ml-1">
                        + {{ names.length - 1 }} More files
                      </b-badge>
                    </template>
                  </b-form-file>
                </b-col>
                <b-col cols="2">
                  <div>
                    <p>
                      &nbsp;
                    </p>
                          <div class="text-center">
                            <div class="my-2">
                              <v-btn color="#1bc5bd" dark v-on:click="CKAnalysis">Upload</v-btn>
                            </div>
                          </div>
                  <!-- <b-button class="mr-3" variant="outline-primary" v-on:click="CKAnalysis">Upload</b-button> -->
                </div>
                </b-col>
              </b-row>
            
          </template>
        </KTBlankTab>
  
      <div class="row" data-app="true">
        <div class="col-md-12">
          <KTTab v-bind:title="'Information Flow'">
            <template v-slot:preview>
              <p>
                The results of the Information Flow metric are given below:
              </p>
              <v-card>
                <v-card-title>
                    Information Flow Metric
                  <v-spacer></v-spacer>
                  <v-text-field
                    v-model="code4.search"
                    append-icon="search"
                    label="Search"
                    single-line
                    hide-details
                  ></v-text-field>
                </v-card-title>
                <v-data-table
                  :headers="code4.headers"
                  :items="code4.classes"
                  :search="code4.search"
                >
                <template v-slot:item.name="{ item }">
                  <!-- 在这里定义第一列的渲染方式 -->
                  <!-- 以 <a> 标签为例 -->
                  {{ item.name }}
                </template>
                </v-data-table>
              </v-card>
            </template>
          </KTTab>
        </div>
      </div>
      <KTTab v-bind:title="'Information Flow'">
            <template v-slot:preview>
              <div id="chart">
                <apexchart type="line" height="350" :options="chartOptions" :series="series"></apexchart>
              </div>
            </template>
      </KTTab>
    </div>
  </template>
  
  <script>
  import KTTab from "@/view/content/Tab.vue";
  import KTBlankTab from "@/view/content/BlankTab.vue";
  import { SET_BREADCRUMB } from "@/core/services/store/breadcrumbs.module";
  import{ getInfoFlow, uploadCode } from "@/api/iff.js";


  export default {
    data() {
      return {
        files : null,
        dialog : false,
        code4: {
          search: "",
          headers: [
            {
              text: "Method Name (方法名)",
              align: "left",
              sortable: false,
              value: "methodName"
            },
            { text: "startLine", value: "startLine" },
            { text: "endLine", value: "endLine" },
            { text: "length", value: "length" },
            { text: "flowIn", value: "flowIn" },
            { text: "flowOut", value: "flowOut" },
            { text: "complexity", value: "complexity" },
            { text: "shepperdComplexity", value: "shepperdComplexity" }
          ],
          classes: [
          ]
        },
        chartOptions: {
            chart: {
              height: 350,
              type: 'line',
              zoom: {
                enabled: false
              },
            },
            dataLabels: {
              enabled: false
            },
            title: {
              text: 'Data Plot',
              align: 'left'
            },
            legend: {
              tooltipHoverFormatter: function(val, opts) {
                return val + ' - <strong>' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + '</strong>'
              }
            },
            markers: {
              size: 0,
              hover: {
                sizeOffset: 6
              }
            },
            xaxis: {
              categories: ['flowIn', 'flowOut', 'length', 'shepperdComplexity'],
            },
            tooltip: {
              y: [
                {
                  title: {
                    formatter: function (val) {
                      return val;
                    }
                  }
                }
              ]
            },
            grid: {
              borderColor: '#f1f1f1',
            }
          },
        series: [],
      };
    },
    methods : {
      showdialog(name){
        event.preventDefault();

        this.series2 = this.series
        .filter(item => item.name === name)  
        .map(item => ({ data: item.data }));

        let resp = this.chatGPT
        .filter(item => item.name === name)
        .map(item => ({ analysis: item.analysis }));

        if (resp && resp.length > 0) {
          this.chatGPTtoShow = resp; 
        } else {
          this.chatGPTtoShow = [{analysis:"AI分析还在进行中,请稍后。。。"}]
        }
        
        console.log(this.chatGPTtoShow)

        this.dialog = true;
      },
      onFileSelected(event) {
        this.files = event.target.files
        console.log(this.files)
      },
      CKAnalysis() {
        console.log("上传文件")
        if (!this.files) {
          return
        }
        let formData = new FormData()
        formData.append('file', this.files[0])
        uploadCode(formData).then(resp => {
          console.log("上传成功")
          let fileName = resp.data.FILENAME

          getInfoFlow(fileName).then(resp => {
           console.log("OK")
           this.code4.classes = resp.data
           const metrics = ['flowIn', 'flowOut', 'length', 'shepperdComplexity'];
           this.series = resp.data.map((item) => ({
            name: item.methodName,
            data:  metrics.map(metric => item[metric]) 
           }))
          })
        })
      }
    },
    components: {
      KTTab,
      KTBlankTab,
    },
    mounted() {
      this.$store.dispatch(SET_BREADCRUMB, [
        { title: "Information Flow", route: "IFF" },
      ]);
    }
  };
  </script>
  <style>
    @import url("https://unpkg.com/dropzone@5/dist/min/dropzone.min.css");
  </style>
  